<template>
	<view :class="themeName">
		<navbar title="砍价进度"></navbar>
		<view class="bargain-progress">
			<!-- 顶部 -->
			<view class="header">
				<view class="" v-if="status != 4">
					<view class="white" style="font-size: 36rpx; margin-bottom: 11rpx" v-if="status == 0">
						{{$zhTran('您正在发起砍价')}}
					</view>
					<view class="white" style="font-size: 36rpx; margin-bottom: 11rpx" v-if="status == 1">
						{{$zhTran('砍价中')}}
					</view>
					<view class="white" style="font-size: 36rpx; margin-bottom: 11rpx" v-if="status == 2">
						{{$zhTran('砍价成功')}}
					</view>
					<view class="white" style="font-size: 36rpx; margin-bottom: 11rpx" v-if="status == 3">
						{{$zhTran('砍价失败')}}
					</view>
					<view class="white" style="font-size: 22rpx; margin-bottom: 30rpx" v-if="status == 0">
						{{$zhTran('邀请好友帮忙砍价 —— 砍至')}}{{ bargainData.min_price || "" }}{{ bargainData.price_unit }}{{$zhTran('即可发货')}}
					</view>
					<view class="white" style="font-size: 22rpx; margin-bottom: 30rpx"
						v-if="status == 1 || status == 2 || status == 3">
						{{$zhTran('邀请好友帮忙砍价 —— 砍至')}}{{ bargainData.floor_price }}{{ bargainData.price_unit }}{{$zhTran('即可发货')}}
					</view>
				</view>

				<view class="flex-col" v-if="status == 4">
					<view class="flex m-d-30">
						<u-image width="80rpx" height="80rpx" shape="circle" :src="bargainData.initiate_user.avatar" />
						<view class="flex-col m-l-20">
							<view class="white" style="font-size: 28rpx">
								{{$zhTran('来自')}}{{ bargainData.initiate_user.nickname }}{{$zhTran('的分享')}}
							</view>
							<view class="white" style="font-size: 22rpx">
								{{$zhTran('谢谢你的助力，动动手指帮我砍一刀')}}
							</view>
						</view>
					</view>
				</view>
				<!-- 商品详情 -->
				<view class="goods-item flex bg-white m-t-30">
					<u-image width="180rpx" height="180rpx" border-radius="10rpx" :src="bargainData.goods_image" />
					<view class="goods-info m-l-15 flex-1">
						<view class="goods-name line-2 m-b-10">{{
								bargainData.goods_name || ""
						}}</view>
						<view class="info-footer flex row-between m-t-5" v-if="status == 0">
							<view class="flex-col">
								<price :content="bargainData.min_price"
									:prefix="$zhTran('最低可砍至') + bargainData.price_symbol" :color="themeColor"
									mainSize="34rpx" minorSize="24rpx" />
								<price :content="bargainData.goods_max_price"
									:prefix="$zhTran('原价') + bargainData.price_symbol" color="#999999" mainSize="24rpx"
									minorSize="24rpx" />
							</view>
						</view>

						<view class="info-footer flex row-between m-t-5 flex-1"
							v-if="status == 1 || status == 2 || status == 3 || status == 4">
							<view class="flex-col flex-1">
								<view class="" style="color: #999999; font-size: 24rpx">
									{{ bargainData.item_spec_value_str }}
								</view>
								<view class="flex row-between flex-1">
									<view class="">
										<price :content="bargainData.item_sell_price"
											:prefix="$zhTran('原价') + bargainData.price_symbol" color="#999999"
											mainSize="24rpx" minorSize="24rpx" />
									</view>
									<view class="flex" v-if="status == 1">
										<!-- <u-count-down 
										  :timestamp="bargainData.end_time - nowTime"
										  color="#FFFFFF"
										  :bg-color="themeColor"
										  :separator-color="themeColor"
										/> -->
										<view class="flex">
											<u-count-down :timestamp="bargainData.end_time - nowTime" height="36"
												separator="zh" :show-hours="false" :show-minutes="false"
												:show-seconds="false" :font-size="24" :separator-size="22" />
											<u-count-down :timestamp="(bargainData.end_time - nowTime) % (60 * 60 * 24)"
												color="#FFFFFF" height="36" separator="colon" :show-days="false"
												:font-size="24" :separator-size="22" :bg-color="bgColor || themeColor"
												:separator-color="separatorColor || themeColor" />
										</view>
										<!-- <count-down :time-end="bargainData.end_time" /> -->
										<view class="muted xs m-l-5"> {{$zhTran('后结束帮砍')}} </view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 请选择商品规格 未砍价时才有 -->
			<view class="content" v-if="status == 0">
				<view class="title"> {{$zhTran('请选择商品规格')}} </view>

				<view class="choose-content flex row-between">
					<view class="flex">
						<view class="muted sm flex-none">{{$zhTran('已选')}}：</view>
						<view class="md normal">
							{{ specValueStr || "" }}
						</view>
					</view>
					<!-- <u-icon name="arrow-right" size="28" color="#999" /> -->
				</view>

				<!-- 规格选择Popup -->
				<goods-spec :defaultInfo="{
					image: bargainData.image,
					price: bargainData.goods_max_price,
					stock: bargainData.total_stock,
					bargain_price: bargainData.min_price,
				}" v-model="showGoodsSpec" :default-select="true" :is-bargain="true" :goods="bargainData.goods_id"
					:buttons="specButtonsList" @change="changeGoodsSpec" @confirm="handleConfirm"
					:spec-list="bargainData.spec_value" :spec-map="bargainData.spec_value_list"
					:prefix="bargainData.price_symbol"
					:understock_order_enabled="bargainData.understock_order_enabled" />

				<view class="lunch-btn white br60 flex row-center" @click="onSelect">{{$zhTran('发起砍价')}}</view>
			</view>

			<!-- 砍价进度 发起砍价后有/查看砍价进度 -->
			<view class="progressing" v-if="status == 1 || status == 2 || status == 3">
				<view class="progressing-heared">
					{{$zhTran('已砍')}}<text
						class="progressing-text">{{ bargainData.help_total}}</text>{{ bargainData.price_unit }}，{{$zhTran('还差')}}<text
						class="progressing-text">{{ bargainData.help_diff}}</text>{{ bargainData.price_unit }}
				</view>
				<view class="progress-container row-center flex">
					<view class="progress m-r-16">
						<view class="progress-bar" :style="{ width: bargainData.precent + '%' }"></view>
					</view>
					<price :content="bargainData.floor_price" :prefix="bargainData.price_symbol" mainSize="24rpx"
						minorSize="24rpx" :color="themeColor" />
				</view>
				<!-- 是否成功文字描述 -->
				<view class="m-b-35 flex row-center">
					<view class="" v-if="status == 2"> {{$zhTran('恭喜您，砍价成功')}} </view>
					<view class="" v-if="status == 3"> {{$zhTran('非常遗憾，砍价失败')}} </view>
				</view>
				<!-- 按钮 -->
				<view class="p-btn">
					<view class="" v-if="status == 1">
						<view class="flex flex-1" v-if="bargainData.btns.buy_now_btn">
							<view class="flex row-center m-r-16 flex-1 btn-event" @click="goToConfirm('random')">
								<view class="lunch-btn-event white br60 flex row-center flex-1"> </view>
								<view class="lunch-btn-font">
									{{ bargainData.price_symbol }}{{ bargainData.current_price }} {{$zhTran('直接购买')}}
								</view>
							</view>
							<view class="lunch-btn white br60 flex row-center flex-1" @click="shareToBargain">
								{{$zhTran('邀请好友帮砍价')}}
							</view>
						</view>
						<view class="lunch-btn white br60 flex row-center" @click="shareToBargain" v-else>
							{{$zhTran('邀请好友帮砍价')}}
						</view>
					</view>
					<view class="" v-if="status == 2">
						<view class="lunch-btn white br60 flex row-center" @click="goToConfirm('floor')"
							v-if="bargainData.btns.buy_allow_btn">{{$zhTran('立即购买')}}</view>
						<view class="lunch-btn white br60 flex row-center" @click="goToOrder" v-else>{{$zhTran('查看订单')}}
						</view>
					</view>
					<view class="" v-if="status == 3">
						<view class="lunch-btn-fail white br60 flex row-center">{{$zhTran('砍价失败')}}</view>
					</view>
				</view>

				<!-- 砍价记录 -->
				<view class="bargain-code-content">
					<view class="bargain-code-title flex row-between">
						<view class="md normal bold"> {{$zhTran('砍价记录')}} </view>
						<view class="muted xs"> {{$zhTran('已有')}}{{ bargainData.help_num }}{{$zhTran('人帮砍')}} </view>
					</view>
					<view class="code-content">
						<view class="user-item row-between flex" v-for="(item, index) in bargainData.help_record"
							:key="item.id">
							<view class="user-content flex">
								<u-image width="80rpx" height="80rpx" shape="circle" :src="item.avatar" />
								<view class="m-l-20">
									<view class="sm normal">
										{{ item.nickname }}
									</view>
									<view class="muted xxs"> {{$zhTran('小刀一砍，惊喜满满')}} </view>
								</view>
							</view>
							<view class="bargain-price xs"> {{ bargainData.price_symbol }}{{ item.reduce_amount || 0 }}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 分享进入 -->
			<view class="shareDetails" v-if="status == 4">
				<!-- 按钮 -->
				<view class="s-btn">
					<!-- <view class="lunch-btn white br60 flex row-center"
						@click="onBargain">帮忙砍一刀</view> -->
					<view class="tips m-b-30" v-if="bargainData.tips">
						{{ bargainData.tips }}
					</view>
					<view class="lunch-btn white br60 flex row-center" v-if="bargainData.btns.help_btn"
						@click="onBargain">{{$zhTran('帮忙砍一刀')}}</view>
					<view class="lunch-btn-fail br60 flex row-center" v-if="bargainData.btns.initiate_btn"
						@click="onGoodsBargain">{{$zhTran('我也要砍价')}}</view>
				</view>

				<!-- 砍价记录 -->
				<view class="bargain-code-content">
					<view class="bargain-code-title flex row-between">
						<view class="md normal bold"> {{$zhTran('砍价记录')}} </view>
						<view class="muted xs"> {{$zhTran('已有')}}{{ bargainData.help_record.length }}{{$zhTran('人帮砍')}}
						</view>
					</view>
					<view class="code-content">
						<view class="user-item row-between flex" v-for="(item, index) in bargainData.help_record"
							:key="item.id">
							<view class="user-content flex">
								<u-image width="80rpx" height="80rpx" shape="circle" :src="item.avatar" />
								<view class="m-l-20">
									<view class="sm normal">
										{{ item.nickname }}
									</view>
									<view class="muted xxs"> {{$zhTran('小刀一砍，惊喜满满')}} </view>
								</view>
							</view>
							<view class="bargain-price xs"> {{ bargainData.price_symbol }}{{ item.reduce_amount || 0 }}
							</view>
						</view>
					</view>
				</view>
			</view>

			<w-jishuzhichi />
			<!-- 砍价成功弹窗/帮砍成功弹窗 -->
			<u-popup v-model="showBargainPop" mode="center">
				<view class="bargain-pop-container">
					<view class="md normal bold flex row-center" style="padding-top: 64rpx">
						{{$zhTran('恭喜您成功砍下')}}<text class="lg" style="color: #ff2c3c">{{
								reduceAmount || 0
						}}</text>{{ bargainData.price_unit }}
					</view>
					<view class="bold md flex row-center" style="margin-top: 38rpx" v-if="status != 4">
						{{$zhTran('还差')}}<text class="m-l-20 differ-price" style="color: #ff2c3c">{{ diffPrice }}<text
								style="font-size: 40rpx">{{ bargainData.price_unit }}</text></text>
					</view>
					<view class="bold xxl flex row-center" style="margin-top: 38rpx; color: #ff2c3c" v-if="status == 4">
						{{$zhTran('已为好友砍价成功')}}
					</view>
					<view class="progress-container row-center flex">
						<view class="progress">
							<view class="progress-bar" :style="{ width: precent + '%' }" />
						</view>
					</view>
					<view class="row-center flex">
						<view class="invite-btn row-center md flex" @click="shareToBargain" v-if="status != 4">
							{{$zhTran('邀请好友帮砍')}}
						</view>
						<view class="invite-btn row-center md flex" @click="closeBargainPop" v-if="status == 4">
							{{$zhTran('确定')}}
						</view>
					</view>
				</view>
				<view class="close-icon flex row-center" @click="closeBargainPop" mode="bottom">
					<u-icon name="close-circle" size="68rpx" color="#fff"></u-icon>
				</view>
			</u-popup>

			<!-- 分享弹窗 -->
			<share-popup v-model="showSharePop" :share-id="initiateId"
				pagePath="bundle/pages/bargain_progress/bargain_progress" :type="4" :bargain="{
					goodsId: bargainData.goods_id,
					activityId: bargainData.activity_id
				}" />
		</view>

		<!-- 加载动画 -->
		<page-status :status="pageStatus">
			<template #error>
				<u-empty :text="$zhTran('加载异常')"></u-empty>
			</template>
		</page-status>
	</view>
</template>

<script>
	import {
		apiBargainDetail,
		apiBargainInitiate,
		apiBargainProgress,
		apiBargainShareDetail,
		apiBargainHelp,
	} from "@/api/bargain.js";
	import {
		OrderTypeEnum
	} from "@/utils/enum";
	import {
		strToParams
	} from "@/utils/tools.js";
	import {
		PageStatusEnum
	} from "@/utils/enum";
	import {
		apiUserCentre
	} from "@/api/user";
	export default {
		data() {
			return {
				// 页面加载状态
				pageStatus: PageStatusEnum["LOADING"],

				activityId: 0, // 砍价活动id
				goodsId: 0, // 商品id

				// 砍价未开始数据
				bargainData: {},

				showGoodsSpec: false, // 商品规格: 显示 | 隐藏
				specButtonsList: [], // 弹窗自定义按钮
				goodsSpecOptions: {}, // 已选商品规格

				// 规格按钮组
				specButtonsGroups: {
					confirm: {
						event: "confirm",
						text: this.$zhTran("确认"),
					},
				},
				// 发起砍价放回数据
				reduceAmount: 0, // 自己的帮砍金额
				diffPrice: 0, // 还差多少到底价的金额
				needHelp: 0, // 总共需要砍的价格
				currentPrice: 0, // 当前价格
				precent: 0, // 砍价进度条百分比
				initiateId: 0, // 砍价id

				showBargainPop: false, // 砍价成功弹窗
				showSharePop: false, // 分享弹窗

				// 分享信息
				status: 0, // 页面状态 0-未发起（发起砍价 1-砍价中 2-砍价成功 3-砍价失败 4-分享进入（分享/海报）
				nowTime: 0, // 当前时间
			};
		},

		computed: {
			// 已选商品规格
			specValueStr() {
				return this.goodsSpecOptions?.spec?.spec_value_str ?? "";
			},
		},

		methods: {
			// 发起砍价页面数据
			bargainDetail() {
				apiBargainDetail({
						activity_id: this.activityId,
						goods_id: this.goodsId,
					})
					.then((res) => {
						console.log("res", res);
						this.bargainData = this.$zhTran(res);

						this.pageStatus = PageStatusEnum["NORMAL"];
					})
					.catch(() => {
						this.pageStatus = PageStatusEnum["ERROR"];
					});
			},

			// 点击选择规格
			onSelect() {
				this.showGoodsSpec = true;
				this.specButtonsList = [this.specButtonsGroups.confirm];
			},
			// 更改规格
			changeGoodsSpec(options) {
				this.goodsSpecOptions = options;
				console.log(options);
			},
			// 确定->发起砍价
			handleConfirm({
				spec,
				number
			}) {
				if (!this.isLogin) return this.$Router.push("/bundle2/pages/login/login");
				apiBargainInitiate({
					activity_id: this.activityId,
					item_id: spec.id,
					goods_num: number,
				}).then((res) => {
					console.log("发起砍价", res);
					this.reduceAmount = res.reduce_amount;
					this.diffPrice = res.diff_price;
					this.initiateId = res.initiate_id;
					this.needHelp = res.need_help;

					this.bargainProgress();

					// 自己不能帮砍，不显示弹窗
					if (!res.reduce_amount && !res.need_help) {
						return;
					}

					// 砍价进度条数据
					this.precent = (res.reduce_amount / res.need_help).toFixed(2) * 100;
					this.showBargainPop = true;
				});
			},

			// 砍价进度
			bargainProgress() {
				apiBargainProgress({
						initiate_id: this.initiateId,
					})
					.then((res) => {
						this.bargainData = this.$zhTran(res);
						this.status = res.status;
						// 砍价进度条数据
						this.bargainData.precent =
							(res.help_total / (res.help_total + res.help_diff)).toFixed(2) * 100;


						// throw 'abcd'
						this.pageStatus = PageStatusEnum["NORMAL"];
					})
					.catch(() => {
						this.pageStatus = PageStatusEnum["ERROR"];
					});
			},

			// 关闭砍价弹窗
			closeBargainPop() {
				this.showBargainPop = false;
			},

			// 邀请好友
			shareToBargain() {
				// this.showBargainPop = false
				// if (this.isHelpKnife) {
				// 	return;
				// }
				this.showSharePop = true;
			},

			// 监听分享
			// #ifdef MP-WEIXIN
			onShareAppMessage() {
				return {
					path: "bundle/pages/bargain_progress/bargain_progress?initiate_id=" +
						this.initiateId +
						"&isShare=2" +
						"&invite_code=" +
						this.userInfo.code,
					title: this.$zhTran("我正在参与砍价，还差一步"),
					imageUrl: this.bargainData.goods_image,
				};
			},
			// #endif

			// 分享详情内容
			bargainShareDetail() {
				return new Promise((reslove, reject) => {
					apiBargainShareDetail({
							initiate_id: this.initiateId,
						})
						.then((res) => {
							this.bargainData = res;
							reslove(res);
							this.pageStatus = PageStatusEnum["NORMAL"];
						})
						.catch((errMsg) => {
							reject(errMsg);
							this.pageStatus = PageStatusEnum["ERROR"];
						});
				});
			},
			// 去订单详情
			goToOrder() {
				this.$Router.push({
					path: "/bundle2/pages/order_detail/order_detail",
					query: {
						order_id: this.bargainData.order_id,
					},
				});
			},
			// 去结算
			goToConfirm(type) {
				// this.$Router.replace({
				// 	path: "/bundle2/pages/goods_order/goods_order",
				// 	query: {
				// 		from: OrderTypeEnum["BARGAIN"],
				// 		payload: {
				// 			initiate_id: this.initiateId,
				// 			buy_condition: type, // 购买类型 random-任意金额购买 floor-底价购买
				// 		},
				// 	},
				// });
				var that = this
				uni.navigateTo({
					url: "/bundle2/pages/goods_order/goods_order",
					events: {
						reCountCarNum(res) {
							that.$store.dispatch("getCartNum");
						}
					},
					success(res) {
						res.eventChannel.emit("receiveData", {
							from: OrderTypeEnum["BARGAIN"],
							payload: {
								initiate_id: that.initiateId,
								buy_condition: type, // 购买类型 random-任意金额购买 floor-底价购买
							},
						});
					}
				});
			},

			// 好友砍价
			onBargain() {
				apiBargainHelp({
					initiate_id: this.initiateId,
				}).then((res) => {
					console.log("发起砍价", res);
					this.reduceAmount = res.reduce_amount;
					this.currentPrice = res.current_price;
					this.initiateId = res.initiate_id;

					// 砍价进度条数据
					this.precent =
						((res.need_help - res.diff_price) / res.need_help).toFixed(2) * 100;

					this.$nextTick(function() {
						this.showBargainPop = true;
					});
					this.bargainShareDetail();
				});
			},

			// 我也要砍价-》跳转到砍价列表页面
			onGoodsBargain() {
				uni.navigateTo({
					url: "/bundle/pages/goods_bargain/goods_bargain",
				});
			},
		},

		onLoad() {
			// 获取当前时间
			let ndate = new Date();
			this.nowTime = Date.parse(ndate) / 1000;
			console.log("nowTime", this.nowTime);

			const options = this.$Route.query;
			const scene = options["scene"]; // 微信二维码
			const id = options?.id; // h5二维码
			console.log("scene", scene);

			// 扫码进入
			if (scene || id) {
				scene
					?
					(this.initiateId = strToParams(decodeURIComponent(scene))["id"]) :
					(this.initiateId = id);
				console.log("initiateId", this.initiateId);

				this.status = 4;
				this.bargainShareDetail().then((data) => {
					// console.log('data', data)
					// console.log('this.bargainData.user_id', data.user_id)
					// 获取用户信息
					if (this.bargainData.user_id == this.userInfo.id) {
						this.bargainProgress();
					}
				});
			} else {
				// 非扫码进入
				// 发起砍价和分享需要用到
				if (options.goods_id) this.goodsId = options.goods_id;

				// 发起砍价->发起详情
				if (options.activity_id) {
					this.activityId = options.activity_id;

					setTimeout(() => {
						this.bargainDetail();
					}, 50);
					return;
				}

				// options.isShare=1即是砍价记录进来  options.isShare=2是微信小程序分享进入
				if (options.isShare == 2) {
					this.status = 4;
					this.initiateId = options.initiate_id;
					this.bargainShareDetail().then((data) => {
						// console.log('data', data)
						// console.log('this.bargainData.user_id', data.user_id)

						// 本人进入分享请求砍价进度信息
						if (this.bargainData.user_id == this.userInfo.id) {
							this.bargainProgress();
						}
					});
				} else if (options.isShare == 1) {
					this.initiateId = options.initiate_id;
					this.bargainProgress();
				}
			}
		},
	};
</script>

<style lang="scss" scoped>
	.bargain-progress {
		.header {
			padding: 0 24rpx;
			@include background_linear();
			height: 330rpx;
			background-size: 100% 100%;
			padding-top: 30rpx;

			.goods-item {
				padding: 30rpx 20rpx;
				border-radius: 20rpx;
			}
		}

		.content {
			margin-top: 88rpx;
			padding: 0 24rpx;

			.title {
				font-family: "PingFang SC";
				font-weight: 500;
				font-size: 34rpx;
				text-align: left;
				color: #333;
				margin-bottom: 30rpx;
			}

			.choose-content {
				padding: 30rpx 20rpx;
				background-color: #ffffff;
			}

			.lunch-btn {
				@include background_color() margin-top: 40rpx;
				width: 702rpx;
				height: 84rpx;
				border-radius: 42rpx;
				// background: #ff2c3c;
				// box-shadow: 0rpx 3rpx 10rpx rgba(235, 36, 51, 0.5);
			}
		}

		.bargain-pop-container {
			background-image: url('@/bundle/static/images/bg_kanjia.png');
			width: 559rpx;
			height: 580rpx;
			background-size: 100% 100%;

			.differ-price {
				font-size: 58rpx;
				line-height: 38rpx;
			}

			.progress-container {
				margin-top: 26rpx;

				.progress {
					width: 409rpx;
					height: 20rpx;
					// background-color: #FD498F1A;
					background-color: #f6f6f6;
					border-radius: 50rpx;

					.progress-bar {
						height: 100%;
						width: 0%;
						@include background_linear();
						// background: linear-gradient(90deg, #FA444D 0%, #FD498F 100%);
						border-radius: 50rpx;
						transition: width 0.5s ease;
					}
				}
			}

			.invite-btn {
				background-image: url('@/bundle/static/images/coupon_button.png');
				background-size: 100% 100%;
				height: 106rpx;
				color: #7b3200;
				font-weight: 500;
				margin-top: 180rpx;
				width: 478rpx;
			}
		}

		.close-icon {
			margin-top: 26rpx;
		}

		.share-pop-container {
			height: 500rpx;
			background-color: $-color-white;
		}

		.progressing {
			margin: 88rpx 24rpx 0 24rpx;
			padding: 24rpx;
			background-color: #ffffff;

			.progressing-heared {
				margin-bottom: 33rpx;

				.progressing-text {
					@include font_color();
				}
			}

			.progress-container {
				margin-bottom: 35rpx;

				.progress {
					width: 568rpx;
					height: 20rpx;
					background-color: #f6f6f6;
					border-radius: 50rpx;

					.progress-bar {
						height: 100%;
						width: 0%;
						// background: linear-gradient(90deg, #FA444D 0%, #FD498F 100%);
						@include background_linear();
						border-radius: 50rpx;
						transition: width 0.5s ease;
					}
				}
			}

			.p-btn {
				.lunch-btn {
					margin-bottom: 60rpx;
					// width: 702rpx;
					height: 84rpx;
					border-radius: 42rpx;
					@include background_color() // background: #ff2c3c;
					// box-shadow: 0rpx 3rpx 10rpx rgba(235, 36, 51, 0.5);
					;
				}

				.lunch-btn-fail {
					margin-bottom: 60rpx;
					// width: 702rpx;
					height: 84rpx;
					border-radius: 42rpx;
					background: #e5e5e5;
				}

				.lunch-btn-event {
					margin-bottom: 60rpx;

					height: 84rpx;
					border-radius: 42rpx;
					@include background_color();
					opacity: 0.2;
				}

				.lunch-btn-font {
					@include font_color();
					position: absolute;
					top: 22rpx;
				}

				.btn-event {
					position: relative;
				}
			}

			.bargain-code-content {
				margin-top: 62rpx;

				.bargain-code-title {}

				.code-content {
					// margin-top: 30rpx;

					.user-item {
						padding: 15rpx 0;
						margin-bottom: 30rpx;

						.bargain-price {
							@include font_color();
						}
					}
				}
			}
		}

		.shareDetails {
			// margin: 88rpx 24rpx 0 24rpx;
			margin: 68rpx 0rpx 0 0rpx;
			padding: 24rpx;

			// background-color: #FFFFFF;
			.s-btn {
				margin: 0 24rpx;

				.lunch-btn {
					margin-bottom: 30rpx;
					// width: 702rpx;
					height: 84rpx;
					border-radius: 42rpx;
					@include background_color() // background: #ff2c3c;
					// box-shadow: 0rpx 3rpx 10rpx rgba(235, 36, 51, 0.5);
					;
				}

				.lunch-btn-fail {
					margin-bottom: 40rpx;
					// width: 702rpx;
					height: 84rpx;
					border-radius: 42rpx;
					background: #ffffff;
				}
			}

			.bargain-code-content {
				padding: 24rpx;
				background-color: #ffffff;

				// margin-top: 62rpx;
				.bargain-code-title {}

				.code-content {
					margin-top: 30rpx;

					.user-item {
						padding: 15rpx 0;
						margin-bottom: 30rpx;

						.bargain-price {
							@include font_color();
						}
					}
				}
			}
		}

		.tips {
			font-family: "PingFang SC Bold";
			font-weight: bold;
			font-size: 28rpx;
			text-align: center;
			color: #999;
		}
	}
</style>